<template>
  <div class="body">
    <img class="x0" src="@/assets/Home相关/logo改.png">
    <img class="x2" src="@/assets/Home相关/文字焕发.png">
    <el-text class="text-1" size="large">首页</el-text>
    <el-text class="text-2" size="large">流行发型</el-text>
    <el-text class="text-3" size="large">男生发型</el-text>
    <el-text class="text-4" size="large">女生发型</el-text>
    <el-text class="text-5" size="large">DIY发型</el-text>
    <el-text class="text-6" size="large">其他</el-text>
    <el-text class="text-7" size="large" @click="goLogin" v-show="!isUserLoggedIn">
      登录
    </el-text>
    <el-text class="text-8" size="large" @click="goRegister" v-show="!isUserLoggedIn">
      注册
    </el-text>
    <img class="x3" src="@/assets/Home相关/搜索框.png">
    <img class="line_top" src="@/assets/Home相关/顶部分割线.png">

    <div class="box">
      <el-row class="tac">
        <el-col :span="24">
          <el-menu
              active-text-color="#9155f0"
              background-color="#ffffff"
              class="el-menu-vertical-demo"
              default-active="2"
              text-color="#fff"
              @open="handleOpen"
              @close="handleClose"
          >
            <el-menu-item index="1" @click="goAboutUs">
              <el-text class="el-menu-item-text" size="large">关于我们</el-text>
            </el-menu-item>

            <el-menu-item index="2" @click="goUserAgreement">
              <el-text class="el-menu-item-text" size="large">用户协议</el-text>
            </el-menu-item>

            <el-menu-item index="3" @click="goPrivacyPolicy">
              <el-text class="el-menu-item-text" size="large">个人隐私政策</el-text>
            </el-menu-item>

            <el-menu-item index="4" @click="goContactUs">
              <el-text class="el-menu-item-text" size="large">联系我们</el-text>
            </el-menu-item>

          </el-menu>
        </el-col>
      </el-row>

    </div>
    <div class="box2">
      <router-view>

      </router-view>
      <div class="bottom">
        <br>
        <br>
        <el-text class="text" @click="goAboutUs">关于我们</el-text>
        <el-text class="text" @click ="goUserAgreement">用户协议</el-text>
        <el-text class="text" @click="goPrivacyPolicy">个人隐私政策</el-text>
        <el-text class="text" @click="goContactUs">联系我们</el-text>
        <br>
        <br>
        <el-divider/>

      </div>
    </div>

  </div>

</template>

<script setup lang="ts">
import {loginInfo} from "@/utils/store.js"
import {computed} from "vue";
import router from "@/router"

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

function goLogin() {
  window.location.href = 'http://localhost:5173/Login'
}

/*点击打开注册页*/
function goRegister() {
  window.location.href = 'http://localhost:5173/Register'
}

const isUserLoggedIn = computed(() => !!loginInfo.userInfo.username)

function goAboutUs() {
  router.push('/UserVisit/AboutUs')
}

function goUserAgreement() {
  router.push('/UserVisit/UserAgent')
}

function goPrivacyPolicy() {
  router.push('/UserVisit/PersonalPrivacyPolicy')
}

function goContactUs() {
  router.push('/UserVisit/ContactUs')
}


</script>


<style scoped>
/*设置网页背景颜色为白色*/

.x0 {
  /*等比例缩放*/
  width: 3%;
  top: 1px;
  left: 60px;
  height: auto;
  position: absolute;
}

.line_top {
  top: 60px;
  position: absolute;
  width: 100%;
}

.box {
  position: absolute;
  top: 140px;
  left: 300px;
  /*盒子边缘长宽*/
  width: 250px;
  height: 600px;
  background-color: #ffffff;
}

.box2 {
  position: absolute;
  top: 140px;
  left: 600px;
  /*盒子边缘长宽*/
  width: 1000px;
  height: 100%;
  background-color: #ffffff;
  /*边框颜色*/
//border: 1px solid #dfe0e1;
}

.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #464545;
  width: 100%;
  height: auto;
}


.x2 {
  top: 9px;
  left: 140px;
  position: absolute;
}

.x3 {
  top: 15px;
  right: 350px;
  position: absolute;
}

.el-menu-item-text {
  color: #000000;
  /*字体加粗*/
  font-weight: bold;

}

.el-menu-item-text:hover {
  color: #9155f0;
  cursor: pointer;
  transition: all 0.5s;
}
.text{
  color: #ddddde;
  font-size: 18px;
  margin-left: 330px;

}
.text:hover{
  color: #9155f0;
  /*下划线*/
  text-decoration: underline;
}

.text-1 {
  top: 5px;
  left: 360px;
  position: absolute;
  /*字号 */
  font-size: 25px;
  /*字体加粗 */
  font-weight: bold;
  /*鼠标悬浮 */
  cursor: pointer;
  padding: 10px 20px;
  /* 添加内边距以确保背景覆盖整个元素 */
}


.text-1:hover {
  color: white;
  background-color: #9155f0;
}

.text-2 {
  top: 5px;
  left: 460px;
  position: absolute;
  /*字号 */
  font-size: 25px;
  /*字体加粗 */
  font-weight: bold;
  /*鼠标悬浮 */
  cursor: pointer;
  padding: 10px 20px;
  /* 添加内边距以确保背景覆盖整个元素 */
}

.text-2:hover {
  color: white;
  background-color: #9155f0;
}

.text-3 {
  top: 5px;
  left: 600px;
  position: absolute;
  /*字号 */
  font-size: 25px;
  /*字体加粗 */
  font-weight: bold;
  /*鼠标悬浮 */
  cursor: pointer;
  padding: 10px 20px;
  /* 添加内边距以确保背景覆盖整个元素 */
}

.text-3:hover {
  color: white;
  background-color: #9155f0;
}

.text-4 {
  top: 5px;
  left: 740px;
  position: absolute;
  /*字号 */
  font-size: 25px;
  /*字体加粗 */
  font-weight: bold;
  /*鼠标悬浮 */
  cursor: pointer;
  padding: 10px 20px;
  /* 添加内边距以确保背景覆盖整个元素 */
}

.text-4:hover {
  color: white;
  background-color: #9155f0;
}

.text-5 {
  top: 5px;
  left: 880px;
  position: absolute;
  /*字号 */
  font-size: 25px;
  /*字体加粗 */
  font-weight: bold;
  /*鼠标悬浮 */
  cursor: pointer;
  padding: 10px 20px;
  /* 添加内边距以确保背景覆盖整个元素 */
}

.text-5:hover {
  color: white;
  background-color: #9155f0;
}

.text-6 {
  top: 5px;
  left: 1020px;
  position: absolute;
  /*字号 */
  font-size: 25px;
  /*字体加粗 */
  font-weight: bold;
  /*鼠标悬浮 */
  cursor: pointer;
  padding: 10px 20px;
  /* 添加内边距以确保背景覆盖整个元素 */
}

.text-6:hover {
  color: white;
  background-color: #9155f0;
}

.text-7 {
  right: 220px;
  font-size: 25px;
  /*字体加�� */
  font-weight: bold;
  /*��标����� */
  cursor: pointer;
  padding: 10px 20px;
  /* 添加内边距以确保背景覆盖整个元素 */
  position: absolute;
  /*设置图层最上方*/
  z-index: 999;
}

.text-7:hover {
  /*字体颜色变为紫色*/
  color: #9155f0;
}

.text-8 {
  right: 140px;
  font-size: 25px;
  /*字体加�� */
  font-weight: bold;
  /*��标����� */
  cursor: pointer;
  padding: 10px 20px;
  /* 添加内边距以确保背景覆盖整个元素 */
  position: absolute;
  /*设置图层最上方*/
  z-index: 999;
}

.text-8:hover {
  /*字体颜色变为紫色*/
  color: #9155f0;
}

/*鼠标选中事件*/

.el-menu-item {
  /*鼠标*/
}


</style>